[アップデート]Amazon Connect Agent Workspaceの「サードパーティアプリケーション」が利用可能に！電話画面にWebページや独自のアプリケーションを表示できるようになりました

Amazon Connectで電話対応する際に、同じ画面でWebページや独自のアプリケーションを表示できるようになりました！

#Amazon Connect

#Amazon Connect Agent Workspace

#AWS

洲崎義人

2024.03.26

こんにちは、洲崎です。
2024/3/26、Amazon Connect Agent Workspaceで「サードパーティアプリケーション」機能がGA（一般公開）されました。

サードパーティアプリケーション機能とは

サードパーティアプリケーションとは、Amazon Connect Agent WorkspaceにWebページや独自のアプリケーションを表示することができる機能です。
2023/10/30に本機能のプレビュー版の発表がありましたが、本日GA（一般公開）となり誰でも利用できるようになりました。

Amazon Connect Agent Workspaceは、Amazon Connectの付加機能がデフォルトで連携されているエージェント向け画面になります。
電話の受発信ができるCCP画面に加え、顧客情報を表示できるAmazon Connect Customer Profilesや、生成AIを活用したナレッジ検索のAmazon Q in Connectを利用することができます。

引用元：Amazon Connect エージェントワークスペースをカスタマイズする

こちらのAmazon Connect Agent WorkspaceにWebページやオリジナルのアプリケーションを組み込むことができるようになりました。

引用元：エージェントワークスペースでのサードパーティアプリケーションの使用を開始する

「サードパーティアプリケーション」はインターネット経由でアクセスできるiframeのURLを埋め込むか、独自のアプリケーションとして作成することもできます。
アプリケーションについては、Amazon Connect SDKを利用して構築します。（詳細はこちら↓）

今回は気軽に試せるiframeで表示できるかを試してみました。

対応リージョン

2024/3/26現在、以下のリージョンで利用可能です。（東京リージョンも利用できます）

米国東部 (バージニア北部)
米国西部 (オレゴン)
アフリカ (ケープタウン)
アジアパシフィック (ソウル)
アジアパシフィック (シンガポール)
アジアパシフィック (シドニー)
アジアパシフィック (東京)
カナダ (中部)
ヨーロッパ (フランクフルト)
ヨーロッパ (ロンドン)

設定してみる

サードパーティアプリケーションの設定

AWSマネジメントコンソールからAmazon Connectを開き、左にある「サードパーティーのアプリケーション」をクリックします。

サードパーティアプリケーションの画面が出るので、右側にある「アプリケーションを追加」をクリックします。

サードパーティアプリケーションの設定項目に入ります。
まずはクラスメソッドのWebサイトを表示してみたいので、以下入力します。

表示名（Agent Workspaceに表示される名前です）
- classmethod
名前空間（※後から変更ができないので注意）
- classmethod
説明
- クラスメソッドのサイト
アクセスURL
- https://classmethod.jp/
許可
- そのまま（デフォルト）
インスタンスの関連付け
- すべてのインスタンスにチェック（動作確認したいインスタンスのみでも問題ないです）

この画面がでたら、設定完了です。

Amazon Connect セキュリティプロファイル

Amazon Connectコンソールに入り、セキュリティプロファイルを開きます。
利用するユーザーのセキュリティプロファイルを開き、「エージェントアプリケーション」の画面に作成したサードパーティアプリケーション（今回の場合classmethod）があるので、アクセスを許可します。

これで、設定完了です。

テスト

クラスメソッドのトップページを表示してみる

Amazon Connect Agent Workspaceを開きます。
右上にあるメニューボタンをクリックすると、アプリケーションの一覧が表示されます。作成したclassmethodをクリックします。

クラスメソッドのサイトが、別タブで表示されました！

この状態で通話をかけてみると、開いていたタブは自動で閉じました。

通話中に再度アプリケーションをクリックすると、問題なく表示されました。

アフターコールワークや、通話終了後もタブは表示されたままでした。

Google Mapを表示してみる

Webサイトは問題なく表示できましたので、Google Mapを試してみます。
対象の場所から「共有」をクリックし、「地図を埋め込む」から取得したHTMLを利用しました。
※Google Mapの埋め込みはこちらの利用規約を同意した上での利用となります。

こちらも問題なくAgent Workspaceに表示することができました。

メモ帳ベースのアプリケーションを試してみる

簡単なメモ帳ベースのHTMLを作成し、組み込みも実装してみました。
CloudFront + S3の構成で、以下のHTMLを準備しS3に配置、CloudFrontのドメインを埋め込んでみました。（HTMLの内容は超シンプルです）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>メモ帳</title>
	<style>
		textarea {
			width: 100%;
			height: 500px;
			box-sizing: border-box;
			padding: 10px;
			font-size: 16px;
		}
	</style>
</head>
<body>
	<textarea id="memoArea" placeholder="ここにメモを入力"></textarea>
</body>
</html>

こちらも問題なく表示ができ、テキストを入力することができました。

表示できない場合

iframeに対応していないサイトの場合は、以下の内容が表示されます。

最後に

今回は一般公開されたAmazon Connect Agent Workspaceで利用できる「サードパーティアプリケーション」を試してみました！
オペレーターが電話対応しつつ、Webページなどを確認できるのはとても良いのではないでしょうか。今後の活用の幅も広がりそうです。
東京リージョンでも利用できるので、ぜひ試してみてください。

ではまた！コンサルティング部の洲崎でした。